<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>TailwindCSS</title>
  </head>
  <body>
    <!-- Positioning -->
    <div class="relative bg-red-200 h-20 w-20/2">
      <p>parent</p>
      <div class="absolute bg-red-500 bottom-0 right-0">
        <p>child</p>
      </div>
    </div>
    <!-- Top left corner -->
    <div class="relative h-32 w-32 bg-yellow-200">
      <div class="absolute h-16 w-16 top-0 left-0 bg-yellow-500"></div>
    </div>
    <!-- Top right corner -->
    <div class="relative h-32 w-32 bg-blue-200">
      <div class="absolute h-16 w-16 top-0 right-0 bg-blue-500"></div>
    </div>

    <!-- Bottom left corner -->
    <div class="relative h-32 w-32 bg-red-200">
      <div class="absolute h-16 w-16 bottom-0 left-0 bg-red-500"></div>
    </div>

    <!-- Bottom right corner -->
    <div class="relative h-32 w-32 bg-slate-300">
      <div class="absolute h-16 w-16 bottom-0 right-0 bg-slate-500"></div>
    </div>

    <!-- Span top edge -->
    <div class="relative h-32 w-32 bg-green-300">
      <div class="absolute h-16 inset-x-0 top-0 bg-green-500"></div>
    </div>
    <!-- Span left edge -->
    <div class="relative h-32 w-32 bg-teal-300">
      <div class="absolute inset-y-0 left-0 w-16 bg-teal-500"></div>
    </div>
    <!-- Span right edge -->
    <div class="relative h-32 w-32 bg-sky-300">
      <div class="absolute inset-y-0 right-0 w-16 bg-sky-500"></div>
    </div>
    <!-- Span bottom edge -->
    <div class="relative h-32 w-32 bg-purple-300">
      <div class="absolute inset-x-0 bottom-0 h-16 bg-purple-500"></div>
    </div>
    <!-- Display Classes -->
    <div>
      Lorem ipsum, dolor sit amet consectetur
      <span class="inline font-bold">I love you</span> adipisicing elit.
      Cupiditate deleniti
      <span class="inline-block font-bold">I love you </span> dolorum eum nisi
      libero est, voluptatum dolore voluptates
      <span class="block font-bold">I love you </span> dolores labore id
      obcaecati<span class="hidden">I love you </span> adipisci ipsa inventore
      architecto accusamus atque nostrum impedit.
    </div>
    <!-- Z-Index -->
    <div class="relative h-36">
      <div class="absolute left-10 w-24 h-24 bg-blue-300 z-20">1</div>
      <div class="absolute left-20 w-24 h-24 bg-blue-400">2</div>
      <div class="absolute left-40 w-24 h-24 bg-blue-500 z-40">3</div>
      <div class="absolute left-60 w-24 h-24 bg-blue-600 z-50">4</div>
      <div class="absolute left-80 w-24 h-24 bg-blue-700 z-20">5</div>
    </div>
    <div class="relative h-36">
      <div class="absolute right-10 w-24 h-24 bg-gray-300">1</div>
      <div class="absolute right-20 w-24 h-24 bg-gray-400">2</div>
      <div class="absolute right-40 w-24 h-24 bg-gray-500">3</div>
      <div class="absolute right-60 w-24 h-24 bg-gray-600">4</div>
      <div class="absolute right-80 w-24 h-24 bg-gray-700">5</div>
    </div>
    <!-- Floats -->
    <div class="w-1/2">
      <img class="h-40 w-40 float-right mr-4" src="../assets/img/img1.jpg" />
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, harum
        voluptates, illo adipisci odio beatae asperiores aliquid eius quasi
        magnam accusantium, vel eum! Nesciunt modi repudiandae tempore dolor non
        eaque!
      </p>
    </div>
  </body>
</html>

<!-- Position Classes
      static	    position: static;
      fixed	      position: fixed;
      absolute	  position: absolute;
      relative	  position: relative;
      sticky	    position: sticky;
    -->

<!-- Display Classes
      block	            display: block;
      inline-block	    display: inline-block;
      inline	          display: inline;
      flex	            display: flex;
      inline-flex	      display: inline-flex;
      table	            display: table;
      grid	            display: grid;
      inline-grid	      display: inline-grid;
      contents	        display: contents;
      list-item	        display: list-item;
      hidden	          display: none;
    -->

<!-- Z-Index
      z-0	    z-index: 0;
      z-10	  z-index: 10;
      z-20	  z-index: 20;
      z-30	  z-index: 30;
      z-40	  z-index: 40;
      z-50	  z-index: 50;
      z-auto	z-index: auto;
    -->

<!-- Float
      float-right	  float: right;
      float-left	  float: left;
      float-none	  float: none;
    -->
